import React, {Component} from 'react';
import { TabBar } from 'antd-mobile';
import cookbook from '../asset/cookbook.png'
import cookbookactive from '../asset/cookbook-active.png'
import menu from '../asset/menu.png'
import menuactive from '../asset/menu-active.png'
import more from '../asset/more.png'
import moreactive from '../asset/more-active.png'
import CookBook from "./Cookbook/CookBook";
class Layout extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'redTab',
            hidden: false,
            fullScreen: true,
        };
    }
    render() {
        return (
            <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="菜谱大全"
                        key="cookbook"
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${cookbook}) center center /  21px 21px no-repeat` }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${cookbookactive}) center center /  21px 21px no-repeat` }}
                        />
                        }
                        selected={this.state.selectedTab === 'blueTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'blueTab',
                            });
                        }}
                        data-seed="logId"
                    >
                        <CookBook/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${menu}) center center /  21px 21px no-repeat` }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${menuactive}) center center /  21px 21px no-repeat` }}
                            />
                        }
                        title="分类"
                        key="menu"
                        selected={this.state.selectedTab === 'redTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'redTab',
                            });
                        }}
                        data-seed="logId1"
                    >

                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${more}) center center /  21px 21px no-repeat` }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: `url(${moreactive}) center center /  21px 21px no-repeat` }}
                            />
                        }
                        title="更多"
                        key="more"
                        selected={this.state.selectedTab === 'greenTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'greenTab',
                            });
                        }}
                    >

                    </TabBar.Item>
                </TabBar>
            </div>

        );
    }
}

export default Layout;